import React, { Component ,Suspense} from 'react';
import loading from '../assets/loading.gif'
import { Switch, Route, Redirect } from 'react-router-dom'


class RouterView extends Component {

    render() {
        var { routes } = this.props;
        
        // 过滤路由表中的普通路由
        var normalRoutes = routes.filter((item) => {
            return item.path && item.component;
        })
        // 过滤路由表中的重定向路由
        var redirectRoutes = routes.filter((item) => {
            return item.redirect;
        })
        // 过滤路由表中的404路由
        var notfoundRoutes = routes.filter((item) => {
            return item.component && !item.path;
        })
        return (
            <div className=''>
                <Suspense fallback={ <img className='com_loading' alt='' src={loading}></img> }>
                    <Switch>
                        {
                            
                            normalRoutes.map((item, index) => {
                                return (
                                    <Route key={index} exact={item.exact||false} path={item.path} render={(props)=>{
                                        
                                        if( item.children&&item.children.length>0){
                                            return <item.component {...props} routes={item.children}></item.component>
                                        }else{
                                            return <item.component {...props}></item.component>
                                        }
                                    }}></Route>
                                )
                            })
                        }
                        {
                            redirectRoutes.map((item, index) => {
                                return (
                                    <Redirect key={index} exact from={item.from} to={item.to}></Redirect>
                                )
                            })
                        }
                        {
                            notfoundRoutes.map((item, index) => {
                                return (
                                    <Route key={index}  component={item.component}></Route>
                                )
                            })
                        }
                    </Switch>
                </Suspense>
            </div>
        );
    }
}

export default RouterView;